<template>
  <div class="app-container visit-manage">
    <div>
      <avue-form
        :option="option"
        v-model="queryParams"
        ref="searchForm"
        v-show="showSearch"
        @keydown.enter="getList"
      >
        <template #productId>
          <el-select
            v-model="queryParams.productId"
            placeholder="请选择产品"
            class="w-full"
            suffix-icon="Search"
            remote-show-suffix
            :suffix-transition="false"
            filterable
            remote
            clearable
            :remote-method="val => getProduct(val)"
          >
            <el-option
              v-for="item in productSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <div>
                <span>{{ item.name }}</span>
              </div>
            </el-option>
          </el-select>
        </template>
        <template #menu-form>
          <el-button icon="Search" type="primary" @click="getList" class="m-l-3"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="handleEmpty(searchForm)"
            >重置</el-button
          >
          <el-button icon="Download" @click="exportFile(searchForm)"
            >导出</el-button
          >
        </template>
      </avue-form>

      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Download"
            @click="handleDownload"
            >导出数据</el-button
          >
        </el-col>
      </el-row> -->

      <el-table
        v-loading="loading"
        :data="tableList"
        row-key="id"
        stripe
        @selection-change="handleSelectionChange"
        @row-dblclick="dbclickRow"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <!-- <el-table-column type="expand" width="40">
          <template #default="props">
            <div class="p-x-20">
              <el-table :data="props.row.productList">
                <el-table-column label="产品名称" prop="name" />
                <el-table-column label="服务时段" prop="serviceDateArr">
                  <template #default="scope">
                    <div>
                      <span v-if="scope.row.startDate && scope.row.endDate"
                        >{{ scope.row.startDate }}至{{
                          scope.row.endDate
                        }}</span
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="customerCreditCode"
          label="客户税号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="customerName" label="客户名称" min-width="100">
          <!-- <template #default="scope">
            <el-link
              v-if="scope.row.customerType == 'customer'"
              type="primary"
              :underline="false"
              @click="
                goTo('/customerManage/customerModules/customerDetails', {
                  customerId: scope.row.customerId
                })
              "
              >{{ scope.row.customerName }}</el-link
            >
            <el-link
              v-else-if="scope.row.customerType == 'cusLink'"
              type="primary"
              :underline="false"
              @click="
                goTo('/customerManage/contactsModules/contactsDetails', {
                  contactsId: scope.row.customerId
                })
              "
              >{{ scope.row.customerName }}</el-link
            >
          </template> -->
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="归属公司"
          width="100"
          align="center"
        >
          <!-- <template #default="scope">
            {{ getName(scope.row.deptId, companyOption) }}
            <dict-drop :options="companyOption" :value="scope.row.deptId" />
          </template> -->
        </el-table-column>
        <el-table-column
          prop="taxdeptName"
          label="所属税务局"
          width="180"
          align="center"
        >
          <!-- <template #default="scope">
            <dict-drop
              :options="taxTreeOption"
              :value="scope.row.taxdeptCode"
            />
          </template> -->
        </el-table-column>
        <!-- <el-table-column prop="title" label="订单标题" width="230" /> -->
        <el-table-column label="产品名称" prop="name" />
        <el-table-column label="服务时段" prop="serviceDateArr" width="190">
          <template #default="scope">
            <div>
              <span v-if="scope.row.startDate && scope.row.endDate"
                >{{ scope.row.startDate }}至{{ scope.row.endDate }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="businessType"
          label="业务板块"
          width="130"
          align="center"
        >
          <template #default="scope">
            <dict-drop
              :options="order_business_type"
              :value="scope.row.businessType"
            ></dict-drop>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="status" label="状态" width="130" align="center">
          <template #default="scope">
            <div>
              <dict-drop :options="order_status" :value="scope.row.status" />
              <span
                class="text-12px text-#999999"
                v-if="scope.row.approvalStatus"
                >({{ scope.row.approvalStatus }})</span
              >
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          prop="price"
          label="订单总金额"
          width="130"
          align="center"
        >
          <template #default="scope">
            <span v-if="scope.row.price">¥{{ scope.row.price }}</span
            ><span v-else>-</span>
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
          align="center"
          width="220"
          fixed="right"
          class-name="small-padding"
        >
          <template #default="scope">
            <el-button
              plain
              size="small"
              type="primary"
              icon="CircleCheckFilled"
              @click="handleContinue(scope.row)"
              style="padding-left: 0.5rem; padding-right: 0.5rem"
              >回访</el-button
            >
            <el-button
              plain
              size="small"
              type="success"
              icon="View"
              style="padding-left: 0.5rem; padding-right: 0.5rem"
              @click="
                goTo('/quality/service/visitList', {
                  tableParam: JSON.stringify({
                    businessId: scope.row.id, //业务id
                    productId: scope.row.productId, //产品id
                    busineName: scope.row.title, //业务名称
                    tableName: 'ord_order' //业务类型  biz_customer  客户页面  ord_project  项目  ord_order订单
                  })
                })
              "
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 回访弹窗 -->
      <VisitDia
        :dialogParam="visitDiaParam"
        @ok="saveFn"
        @close="visitDiaParam.isVisible = false"
      ></VisitDia>
    </div>
  </div>
</template>
<script setup name="VisitManage">
import { reactive, toRefs, ref, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  order_business_type, //业务类型
  companyOption, //所属公司
  taxTreeOption, //税务局
  businessTypeOption //业务类型树
} from '@/hooks/dict/order'
import { downLoadByUrl } from '@/utils/myDownload'
import { orderVisitList } from '@/api/visit/visit'
import { listProductSelect } from '@/api/productMange/product'
import VisitDia from './modules/visit'
import { getPricipalId } from '@/utils/commo'
import { strToArr } from '@/utils/commo'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const baseUrl = import.meta.env.VITE_APP_BASE_API
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    receiptsDateArr: [],
    productId: undefined,
    serviceDateArr: [],
    deptId: userStore.userInfo.orgId,
    businessType: undefined
  },
  ids: [],
  selectArr: [],
  total: 0,
  option: {
    labelWidth: '10',
    menuSpan: 6,
    submitBtn: false,
    menuPosition: 'left',
    // gutter: 30,
    emptyBtn: false,
    column: [
      {
        prop: 'receiptsDateArr',
        type: 'daterange',
        span: 4,
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '订单开始时间',
        endPlaceholder: '订单结束时间'
      },
      {
        // label: '性别',
        span: 3,
        prop: 'productId',
        placeholder: '产品',
        type: 'select'
      },
      {
        prop: 'serviceDateArr',
        type: 'daterange',
        span: 4,
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '服务开始时间',
        endPlaceholder: '服务结束时间'
      },
      {
        prop: 'deptId',
        span: 3,
        placeholder: '所属公司',
        type: 'tree',
        defaultExpandAll: true,
        disabled: userStore.userInfo.orgId != 484,
        props: {
          value: 'id', //   value: 'deptId',
          label: 'label' //   label: 'deptName'
        },
        dicData: companyOption
      },
      {
        // label: '性别',
        span: 3,
        prop: 'businessType',
        placeholder: '业务板块',
        type: 'tree',
        dicData: businessTypeOption
      }
    ]
  },
  showSearch: true,
  disUpdate: true /* 编辑按钮是否可编辑 */,
  disDelete: true /* 关闭按钮是否可编辑 */,
  loading: false,
  tableList: [],
  productSelect: [],
  visitDiaParam: {} // 回访弹窗配置
})
const {
  queryParams,
  ids,
  selectArr,
  total,
  option,
  showSearch,
  disUpdate,
  disDelete,
  loading,
  tableList,
  productSelect,
  visitDiaParam
} = toRefs(data)

watch(
  [() => route.query.salesOrderData],
  async () => {
    if (route.query.salesOrderData) {
      queryParams.value = JSON.parse(route.query.salesOrderData)
      getList()
    }
  },
  {
    immediate: true
  }
)
// 初始化
async function init() {
  // 归属部门
  getList()
}
// 重置
function handleEmpty(formEl) {
  console.log('queryParams.value1==>', toRaw(queryParams.value))
  proxy.resetForm('searchForm')
  proxy.resetForm('seniorSearchForm')
  // proxy.$refs.searchForm.resetForm()
  getList()
}

// 导出
function exportFile(query) {
  downLoadByUrl('/ord/return/visit/export', queryParams.value, {
    fileName: '回访管理的导出',
    onDownload: e => {
      console.log('导出==》', e)
    }
  })
}
// 获取数据列表
function getList() {
  loading.value = true
  orderVisitList(queryParams.value).then(res => {
    loading.value = false
    tableList.value = res.rows
    total.value = res.total
    console.log(' tableList.value==>', tableList.value)
  })
  console.log('获取数据')
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  selectArr.value = selection
  disUpdate.value = selection.length != 1
  disDelete.value = !selection.length
}
// 双击行
function dbclickRow(row, column, event) {
  goTo('/sales/indent/salesOrderDetails', {
    salesOrderId: row.id
  })
}
function goTo(url, data) {
  router.push({ path: url, query: data })
}

// 检索产品
function getProduct(value) {
  let data = {
    name: value
  }
  listProductSelect(data).then(e => {
    // console.log('e==>', e.rows)
    productSelect.value = e.rows
  })
}
//打开回访弹窗
function handleContinue(row) {
  console.log('回访==》', visitDiaParam.value)
  /***订单模块 */
  console.log('row==>', row)
  visitDiaParam.value = { ...row, id: '' }
  visitDiaParam.value.isVisible = true
  visitDiaParam.value.tableName = 'ord_order'
  visitDiaParam.value.businessId = row.id
  visitDiaParam.value.customerName = row.customerName
  visitDiaParam.value.customerCreditCode = row.customerCreditCode
  visitDiaParam.value.orderTitle = row.title
  visitDiaParam.value.productList = [{ label: row.name, value: row.productId }]
  // row.productList.map(e => {
  //   return { label: e.name, value: e.productId }
  // })
}

// 导出
const handleDownload = () => {}
// 确认回访
function saveFn() {}

init()
</script>
<style scoped>
.search-drawer-retract {
  color: #999999;
}
</style>
